﻿@{
  ViewData["Title"] = "用户列表";
}
<div class="layui-layout layui-layout-admin">
  <form class="layui-form" action="" lay-filter="val-filter">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">帐号名称</label>
        <div class="layui-input-inline">
          <input type="hidden" name="id" value="0" />
          <input type="hidden" name="orgId" id="orgId" value="0" />
          <input type="text" name="account" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
          <input type="text" name="nickName" autocomplete="off" class="layui-input">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">手机号码</label>
        <div class="layui-input-inline">
          <input type="text" name="phone" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">真实姓名</label>
        <div class="layui-input-inline">
          <input type="text" name="realName" autocomplete="off" class="layui-input">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-inline">
          <div id="roleIdList" class="xm-select-demo"></div>
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">帐号类型</label>
        <div class="layui-input-inline">
          <select name="accountType">
            <option value="888">普通用户</option>
            <option value="999">超级管理员</option>9
          </select>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-inline">
          <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
          <input type="number" value="100" lay-affix="number" name="orderNo" autocomplete="off" class="layui-input">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">所属机构</label>
        <div class="layui-input-inline">
          <input type="text" name="org" id="org" lay-filter="org" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">职务</label>
        <div class="layui-input-inline">
          <select name="posId" id="posId"></select>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-block">
        <textarea name="remark" class="layui-textarea"></textarea>
      </div>
    </div>

  </form>
</div>

@section scripts {
  <script src="~/component/libs/xm-select.js"></script>
  <script type="text/javascript">
    var app = {};
    layui.use(['http', 'treeSelect', 'toast'], function () {
      var $ = layui.$,
        form = layui.form,
        treeSelect = layui.treeSelect,
        toast = layui.toast,
        http = layui.http;
      //
      app.save = function () {
        form.submit('val-filter', function (data) {
          var postData = data.field;
          //角色列表
          postData.roleIdList = postData.roleids.split(',');          
          var url = postData.id == '0' ? '/api/sysUser/add' : '/api/sysUser/update'
          http.post(url, postData).then((res) => {
            if (res.code == 200) {
              parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
              parent.layui.table.reload('lsttable');
              toast.success({ message: '保存成功！' });
            }
            else {
              layer.alert('保存失败，错误信息:' + res.message, { icon: 2 });
            }
          });
          return false;
        });
      }
      //
      app.initData = async function (data) {
        form.val('val-filter', data);
        //
        //修改(获取用户拥有角色集合 )
        let roleid = [];
        if (data.id > 0) {
          let resRole = await http.get('/api/sysUser/ownRoleList/' + data.id);
          roleid = resRole.result;
        }
        //角色列表
        http.get('/api/sysRole/list').then((res) => {
          let roleids = [];
          res.result.forEach(function (item) {
            roleids.push({ name: item.name, value: item.id, selected: roleid.includes(item.id) });
          });
          xmSelect.render({
            el: '#roleIdList',
            name: 'roleids',
            data: roleids
          })
        })
        //职务列表
        http.get('/api/sysPos/list').then((res) => {
          res.result.forEach(function (item) {
            var selected = data.posName != undefined && item.name == data.posName ? 'selected' : '';
            $('#posId').append('<option ' + selected + ' value=' + item.id + '>' + item.name + '</option>')
          });
          form.render('select');
        })
        //组织树
        treeSelect.render({
          elem: '#org',
          data: '/api/sysOrg/list?Id=0',
          headers: {
            Authorization: http.getToken()
          },
          success: function (d) {
            // 选中节点，根据id筛选
            if ($('#orgId').val() != '0') treeSelect.checkNode('org', $('#orgId').val());
          },
          click: function (d) {
            $('#orgId').val(d.current.id);
          }
        });

      };
    })
  </script>
}
